<script setup>
import MyForm from "@/components/MyForm.vue";
import {onMounted, shallowReactive, shallowRef} from "vue";
import {RULE} from "@/const";
import MyNav from "@/components/MyNav.vue";
import router from "@/router";
import {updateApi} from "@/api/DeptApi";
import {listApi} from "@/api/RoomApi";
import {getResponseData} from "@/util";

// 所在房间下拉菜单选项
let optionItems = [];
// 获取部门记录
let dept = JSON.parse(sessionStorage.getItem('dept'));

// 表单项
let items = shallowRef([
  {'label': '部门名称', 'prop': 'title'},
  {'label': '部门描述', 'prop': 'info', 'type': 'textarea'},
  {
    'label': '所在房间', 'prop': 'fkRoomId', 'type': 'select',
    'optionItems': optionItems
  },
]);
// 表单默认值
let data = shallowReactive({
  'id': dept['id'],
  'title': dept['title'],
  'fkRoomId': dept['fkRoomId'],
  'info': dept['info'] ? dept['info'] : '记录暂无描述',
});
// 表单规则
let rules = {
  'info': RULE.COMMON_INFO,
  'title': RULE.COMM_TITLE,
};

/* ==================== 查询全部的房间记录 ==================== */
async function listRoom() {
  let res = await listApi();
  let rooms = getResponseData(res);
  Object.values(rooms).forEach(room => {
    optionItems.push({'label': room['title'], 'value': room['id']});
  });
}

/* ==================== 加载函数 ==================== */
onMounted(() => listRoom());
</script>

<template>

  <my-nav :items="[
  {'icon': 'User', 'label': '员工管理'},
  {'icon': 'User', 'label': '部门列表', 'url': '/ums/Dept'},
  {'icon': 'User', 'label': '修改部门'},
]"/>

  <el-divider/>
  <my-form type="update"
           :items="items"
           :data="data"
           :rules="rules"
           :api="updateApi"
           :fn="() => router.push('/ums/Dept')"
           :span="1"/>

</template>

<style scoped lang="scss">

</style>